<template>
  <view class="book">
    <view class="content">
      <view class="box">
        <view class="control">
          <view class="control_content" @click="change(0)">
            <text>{{ leadReadText }}</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/close.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="control_content" @click="change(1)">
            <text>强化生词</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/close.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="control_content" @click="change(2)">
            <text>消灭生词</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/close.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
      <view class="box">
        <slot name="book"></slot>
        <view class="text">
          <text>已经添加了</text>
          <text class="active">{{ list.length }}</text>
          <text>个生词</text>
        </view>
      </view>
    </view>
    <view class="table" v-if="list.length > 0">
      <view class="table_title">
        <view class="table_content_text">
          <text>词汇</text>
        </view>
        <view class="table_content_text">
          <text>音标</text>
        </view>
        <view class="table_content_text">
          <text>中文释义</text>
        </view>
        <view class="table_content_text">
          <text>例句</text>
        </view>
      </view>
      <view class="table_container">
        <view
          :class="{
            table_content: true,
            active: currentPlayIndex === index && playState,
          }"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="table_content_text">
            <text>{{ item.word }}</text>
          </view>
          <view class="table_content_text" @click="play(item)">
            <text>{{ item.wordSoundmark }}</text>
            <!-- <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/newimg/yl.png"
              mode="widthFix"
            ></image> -->
          </view>
          <view class="table_content_text">
            <text>{{ item.wordParaphrase }}</text>
          </view>
          <view class="table_content_text" @click="viewDetails(item, index)">
            <text class="active">详情</text>
          </view>
        </view>
      </view>
    </view>
    <view class="default" v-else>
      <image
        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/newWords_default.png"
        mode="widthFix"
      ></image>
    </view>
    <u-mask :show="isShowPopup" :zoom="false" @click="isShowPopup = false">
      <view class="details" @click.stop>
        <view class="word">
          <text>{{ detailWord }}</text>
          <text>{{ detailWordChinese }}</text>
        </view>
        <view class="example">
          <text>{{ detailExampleWord }}</text>
          <text>{{ detailExampleWordChinese }}</text>
          <view class="example_button" @click="playDetailExampleWord()">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="image">
          <image :src="detailImage" mode="aspectFill"></image>
        </view>
        <view class="play">
          <text>播放</text>
          <view class="play_button" @click="playDetailWord()">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="button">
          <view
            class="button_content"
            @click="next()"
            v-show="detailIndex !== list.length - 1"
          >
            <text>下一个</text>
          </view>
          <view class="button_content" @click="handleclose()">
            <text>关闭</text>
          </view>
        </view>
      </view>
    </u-mask>
  </view>
</template>
<script>
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      leadReadText: "自动领读",
      audio: null,
      playState: false,
      currentPlayIndex: 0,
      isShowPopup: false,
      detailWord: "",
      detailWordChinese: "",
      detailExampleWord: "",
      detailExampleWordChinese: "",
      detailImage: "",
      detailIndex: 0,
    };
  },
  created() {},
  methods: {
    initData() {
      this.currentPlayIndex = 0;
    },
    change(type) {
      if (type === 0) {
        this.control();
      } else if (type === 1) {
        this.strengthen();
      } else if (type === 2) {
        this.eliminate();
      }
    },
    play(item) {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = item.wordAudio;
      englishAudioContext.play();
    },
    control() {
      if (!this.playState) {
        this.playState = true;
        this.leadReadText = "暂停领读";
        this.playAll();
      } else {
        this.suspend();
      }
    },
    playAll() {
      if (!this.playState) return;
      this.audio = uni.createInnerAudioContext();
      this.audio.src = this.list[this.currentPlayIndex].wordAudio;
      this.audio.play();
      this.audio.onEnded(() => {
        setTimeout(() => {
          this.currentPlayIndex++;
          if (this.currentPlayIndex > this.list.length - 1) {
            this.currentPlayIndex = 0;
            this.suspend();
            return;
          }
          this.playAll();
        }, 2000);
      });
      this.audio.onError(() => {
        this.suspend();
      });
    },
    suspend() {
      this.playState = false;
      this.leadReadText = "自动领读";
    },
    playDetailWord() {
      if (!englishAudioContext.paused) return;
      let wordAudio = this.list[this.detailIndex].wordAudio;
      englishAudioContext.src = wordAudio;
      englishAudioContext.play();
    },
    playDetailExampleWord() {
      if (!englishAudioContext.paused) return;
      let exampleAudio = this.list[this.detailIndex].sentence.sentenceAudio;
      englishAudioContext.src = exampleAudio;
      englishAudioContext.play();
    },
    viewDetails(item, index) {
      this.initDetails(item, index);
      this.play(item);
      this.isShowPopup = true;
    },
    initDetails(item, index) {
      this.detailWord = item.word;
      this.detailWordChinese = item.wordParaphrase;
      this.detailImage = item.wordImage;
      if (item.sentence) {
        this.detailExampleWord = item.sentence.sentenceEnglish;
        this.detailExampleWordChinese = item.sentence.sentenceChinese;
      }
      this.detailIndex = index;
    },
    next() {
      this.detailIndex++;
      let item = this.list[this.detailIndex];
      const index = this.detailIndex;
      this.initDetails(item, index);
      this.play(item);
    },
    handleclose() {
      this.isShowPopup = false;
    },
    strengthen() {
      if (this.list.length === 0) return;
      this.$emit("strengthen");
    },
    eliminate() {
      if (this.list.length === 0) return;
      this.$emit("eliminate");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./NewWordbook.scss";
</style>
